<!--&lt;!&ndash;上传插件&ndash;&gt;-->
<!--<script src="/static/js/jquery-2.1.1.js"></script>-->
<!--<script src="/static/bootstrap/js/bootstrap.js"></script>-->
<!--<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>-->


<!--&lt;!&ndash;引用layui弹框插件&ndash;&gt;-->

<!--<script src="/static/js/yii.js"></script>-->

<!--<link href="/static/css/fileinput.css" rel="stylesheet"/>-->
<!--<script src="/static/js/fileinput.js"></script>-->
<!--<script src="/static/js/fileinput_locale_zh.js" type="text/javascript"></script>-->

<!--<link href="/static/css/default/public.css" rel="stylesheet" type="text/css"/>-->

<!--<link href="/static/layui/css/layui.css" rel="stylesheet"/>-->
<!--<script src="/static/layui/layui.js"></script>-->
<style>
    .modal-dialog{width:900px!important;}
</style>


<div class="modal-header">

    <div class="assistant_header">
        <button type="button" class="close" data-dismiss="modal" close="true">
            <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title">
            <span class="fa fa-legal"></span>银行卡管理
        </h4>
    </div>
</div>
<style>

</style>
<div class="modal-body">



    <div class="form-horizontal">
        <div class="form-group" style="margin: 15px 0;">
            <div class="input-group">
                <input class="form-control" name="keyword" id="keyword" type="text" placeholder="输入姓名/银行卡号进行搜索">
                <div class="input-group-btn">
                    <a class="btn btn-primary js_search" href="javascript:;" id="search"><i class="fa fa-search"></i> 搜索</a>
                </div>
            </div>
        </div>
    </div>


    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script type="text/html" id="barDemo1">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">解绑</a>
    </script>

    <div class="assistant_button" style="display: none">
        <button type="button" class="layui-btn layui-btn-primary js_quit" close="true">取消</button>
        <button type="button" class="layui-btn js_add" _event="community_add" data-id="0" data-name="">保存</button>
    </div>
<!--    <div class="assistant_button" style="text-align: right" >-->
<!--        <button type="button" class="btn btn-default btn-sm js_quit" close="true">取消</button>-->
<!--&lt;!&ndash;        <button type="button" class="btn btn-primary btn-sm js_add" _event="user_add" data-id="0" data-name="">保存</button>&ndash;&gt;-->
<!--    </div>-->

</div>


<script>
    var newid = "{$id}";
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:"{:URL('common/Common/cardList')}?id="+newid
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 1 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页

            }
            ,cols: [[
                // {type:'checkbox'},
                {field:'id',title: 'ID',width:50, sort: true}
                ,{field:'full_name', width:190,title: '开户行'}
                ,{field:'card_number',width:200, title: '卡号'}
                ,{field:'cardholder',width:120, title: '持卡人'}
                ,{field:'idCard',width:200,title: '身份证号'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo1', width:100}
            ]]
        });



        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        type: "post",
                        url: "{:URL('common/Common/delCard')}",
                        data: {id:data.id},
                        dataType: "json",
                        success: function (data) {
                            if (data.code == 0) {
                                obj.del();
                                layer.close(index);
                            }else{
                                layer.alert(data.msg);
                            }
                        }
                    });
                });
            } else if(obj.event === 'edit'){
                var id = data.id;
                var name = data.propertyName;
                $(".js_add").attr("data-id",id);
                $(".js_add").attr("data-name",name);
                $(".js_add").click();
                $(".js_quit").click();
            }
        });
    });






    $(".content").on('click','.js_select',function(){
        var id = $(this).attr("data-id");
        var name = $(this).attr("data-name");
        $(".js_add").attr("data-id",id);
        $(".js_add").attr("data-name",name);
        $(".js_add").click();
        $(".js_quit").click();
    })


    $("#search").click(function () {
        var keyword = $("#keyword").val();
        layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: '#test'
                // ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                // ,defaultToolbar: []
                ,url:"{:URL('common/Common/cardList')}?id="+newid+"&keyword="+keyword
                ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    //,curr: 5 //设定初始在第 5 页
                    ,groups: 1 //只显示 1 个连续页码
                    ,first: false //不显示首页
                    ,last: false //不显示尾页

                }
                ,cols: [[
                    // {type:'checkbox'},
                    {field:'id',title: 'ID',width:50, sort: true}
                    ,{field:'full_name', width:190,title: '开户行'}
                    ,{field:'card_number',width:200, title: '卡号'}
                    ,{field:'cardholder',width:120, title: '持卡人'}
                    ,{field:'idCard',width:200,title: '身份证号'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo1', width:100}
                ]]
            });



            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                console.log(data);
            });
        });

    });



</script>